.header {
    display: flex;
    align-items: center;
}

.header-icon {
    flex-shrink: 0;
    margin-right: var(--space-2xs);
    width: 32px;
    height: 32px;
}

.stats {
    margin-left: auto;

    .num {
        font-size: 30px;
        font-weight: bold;
    }
    .downloads {
        display: flex;
        align-items: center;
    }
}

.stats-label {
    composes: small from './shared/typography.module.css';
    margin-left: var(--space-2xs);
}

.my-info {
    display: flex;
    gap: var(--space-s);

    h2 {
        display: flex;
        align-items: center;
        gap: var(--space-3xs);
        font-size: 1.05em;
        margin: 0;

        > * {
            flex-shrink: 0;
        }
    }

    @media only screen and (max-width: 750px) {
        flex-direction: column;
    }
}

.my-crate-lists {
    flex-direction: column;
    flex-grow: 2;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    > ul {
        margin: var(--space-s) 0;
    }

    @media only screen and (max-width: 750px) {
        order: 1;
    }
}

.my-crates-link,
.followed-crates-link {
    color: var(--main-color-light);
    text-decoration: underline;
    font-size: 90%;
    font-weight: normal;

    &:hover {
        color: #6b6b6b;
    }
}

.my-feed {
    flex-grow: 5;

    @media only screen and (max-width: 750px) {
        order: 0;
    }
}

.feed {
    background-color: white;
    border-radius: var(--space-3xs);
    box-shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
    margin: var(--space-s) 0;
}

.feed-list {
    list-style: none;
    margin: 0;
    padding: 0;

    > * {
        display: flex;
        align-items: baseline;
        padding: var(--space-s);
    }

    > * + * {
        border-top: 1px solid hsla(51, 90%, 42%, .25);
    }
}

.feed-version {
    composes: small from './shared/typography.module.css';
}

.feed-date {
    composes: small from './shared/typography.module.css';
    flex-grow: 1;
    text-align: right;
}

.load-more {
    padding: var(--space-s);
    border-top: 1px solid hsla(51, 90%, 42%, .25);

    button {
        display: block;
        text-align: center;
        width: 100%;
        padding: var(--space-2xs);
        outline: 0;
        border: 0;
        background-color: #dbd9cf;
        color: white;

        &:hover, &:focus {
            background-color: #c5c2b2;
        }
    }
}
